<template>
  <div>
    <login-top middle-top="注册bilibili">
      <div slot="right" style="color:darkgrey; font-size: 14px;" @click="$router.push('/login')">转到登录</div>
    </login-top>
    <login-text label="姓名" placeholder="请输入姓名" rules="^.{6,16}$" style="margin: 4.1vw 0"
                @inputChange="res => this.name = res"></login-text>
    <login-text label="账号" placeholder="请输入账号" rules="^.{6,16}$" @inputChange="res=>this.username=res"></login-text>
    <login-text label="密码" placeholder="请输入密码" rules="^.{6,16}$" type="password"
                @inputChange="res=>this.password=res"></login-text>
    <login-button btn-text="注册" style="margin: 4vw 3vw" @registerSubmit="registerSubmit"></login-button>
  </div>
</template>

<script>
import LoginTop from '@/components/common/LoginTop'
import LoginText from '@/components/common/LoginText'
import LoginButton from '@/components/common/LoginButton'

export default {
  data() {
    return {
      name: '',
      username: '',
      password: ''
    }
  },
  components: {
    LoginTop,
    LoginText,
    LoginButton
  },
  methods: {
    async registerSubmit() {
      let regex = /^.{6,16}$/
      if (this.name !== '' && regex.test(this.username) && regex.test(this.password)) {
        const res = await this.$http.post('/register', {
          name: this.name,
          username: this.username,
          password: this.password
        })
        console.log(res)
        this.$msg.success(res.data.msg)
      } else {
        this.$msg.fail('格式不正确，请重新输入')
      }
    }
  }
}

</script>

